<template>
  <div style="padding: 10px">
    <p>基础</p>
    <d-checkbox v-model="value" :options="options" @change="changeRadio"></d-checkbox>
    <p>尺寸</p>
    <d-checkbox v-model="value" :options="options" size="small"></d-checkbox>
    <p>带边框的</p>
    <d-checkbox v-model="value" :options="options" border></d-checkbox>
    <p>禁用的</p>
    <d-checkbox v-model="value2" :options="options2"></d-checkbox>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import { ref } from 'vue'
  const value = ref([])
  const value2 = ref([])
  const options = ref([
    { label: '选项1', value: false },
    { label: '选项2', value: true }
  ])
  const options2 = ref([
    { label: '我不禁用', value: false },
    { label: '我是禁用的', value: true, disabled: true }
  ])
  const changeRadio = (val: string | number | boolean) => {
    ElMessage.success(`你选中了：${val}`)
  }
</script>
